<script setup lang="ts">
  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()
  import { useMemberStore } from '@/stores'
import {http} from '@/utlis/http.ts'
  import {ref} from 'vue'
  
  const imgpath=ref('')
  imgpath.value=useMemberStore().userinfo.default_img
  const userinfo=ref({
    username:'',
    signature:''
  })
const uploadimg=()=>{
  uni.chooseImage({
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: ({ tempFilePaths, tempFiles }) => {
      imgpath.value=tempFilePaths[0]
      // // #ifdef H5
      // // 将图片文件转换为 base64 格式
      // const formData = new FormData();
      // formData.append('file', imgpath.value);
      //   // 发送uni.request请求
      //   uni.request({
      //     url: 'userinfo/put/img/h5/', // 上传图片的接口地址
      //     method: 'POST',
      //     header: {
      //       'content-type': 'application/json',
      //     },
      //     data: formData,
      //     success: (requestRes) => {
      //       console.log('上传成功', requestRes.data.url);
      //       useMemberStore().userinfo.default_img=requestRes.data.url
      //     },
      //     fail: (requestError) => {
      //       console.log('上传失败', requestError);
      //     },
      //   });
      
  
      // // #endif
     // #ifdef MP-WEIXIN || H5
     uni.uploadFile({
  url: 'https://www.damer.asia/api/userinfo/put/img/',
  fileType: 'image',
  filePath: imgpath.value, 
  withCredentials: true,
  name: 'file',
  success: ({ data, statusCode ,head}) => {
    useMemberStore().userinfo.default_img=JSON.parse(data).url
console.log('dataimg',JSON.parse(data),head)

  },
  fail: (error) => {}
})
     // #endif
    },
    fail: (error) => {
      uni.showToast({
        title: '授权失败',
        icon: 'error',
        mask: true
      })
    }
  
  })
  
}
  const Onsub=()=>{
    //console.log('fff',username.value)
    uni.request({
      url: 'userinfo/put/text/',
      data: userinfo.value,
      header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      method: 'POST',
      sslVerify: true,
      success: ({ data, statusCode, header }) => {
        useMemberStore().userinfo.name=data.info.username
        console.log('text',data.info.username)
      },
      fail: (error) => {}
    })
  }
  </script>
  
  <template>
    <view class="viewport">
      <!-- 导航栏 -->
      <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
        <navigator
          open-type="navigateBack"
          class="back icon-left"
          hover-class="none"
        ></navigator>
        <view class="title">个人信息</view>
      </view>
      <!-- 头像 -->
      <view class="avatar">
        <view class="avatar-content" @click="uploadimg">
          <image class="image" :src="imgpath" mode="aspectFill" />
          <text class="text" >点击修改头像</text>
        </view>
      </view>
      <!-- 表单 -->
      <view class="form">
        <!-- 表单内容 -->
        <view class="form-content">
         
          <view class="form-item">
            <text class="label" >昵称</text>
            <input class="input" v-model="userinfo.username" type="text" placeholder="请填写昵称"  />
          </view>
          <view class="form-item">
            <text class="label" >签名</text>
            <input class="input2" v-model="userinfo.signature" type="text" placeholder="请填写个性签名"  />
          </view>
          <!-- <view class="form-item">
            <text class="label">性别</text>
            <radio-group>
              <label class="radio">
                <radio value="男" color="#27ba9b" :checked="true" />
                男
              </label>
              <label class="radio">
                <radio value="女" color="#27ba9b" :checked="false" />
                女
              </label>
            </radio-group>
          </view>
          <view class="form-item">
            <text class="label">生日</text>
            <picker
              class="picker"
              mode="date"
              start="1900-01-01"
              :end="new Date()"
              value="2000-01-01"
            >
              <view v-if="false">2000-01-01</view>
              <view class="placeholder" v-else>请选择日期</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">城市</text>
            <picker
              class="picker"
              mode="region"
              :value="['广东省', '广州市', '天河区']"
            >
              <view v-if="false">广东省广州市天河区</view>
              <view class="placeholder" v-else>请选择城市</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">职业</text>
            <input class="input" type="text" placeholder="请填写职业" value="" />
          </view> -->
        </view>
        <!-- 提交按钮 -->
        <button class="form-button" @click="Onsub">保 存</button>
      </view>
    </view>
  </template>
  
<style lang="scss">
  page {
    background-color: #f4f4f4;
  }
  
  .viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
    background-size: auto 420rpx;
    background-repeat: no-repeat;
  }
  
  /* // 导航栏 */
  .navbar {
    position: relative;
  
    .title {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      color: #fff;
    }
  
    .back {
      position: absolute;
      height: 40px;
      width: 40px;
      left: 0;
      font-size: 20px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  // 头像
  .avatar {
    text-align: center;
    width: 100%;
    height: 260rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    .image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      background-color: #eee;
    }
  
    .text {
      display: block;
      padding-top: 20rpx;
      line-height: 1;
      font-size: 26rpx;
      color: #fff;
    }
  }
  
  // 表单
  .form {
    background-color: #f4f4f4;
  
    &-content {
      margin: 20rpx 20rpx 0;
      padding: 0 20rpx;
      border-radius: 10rpx;
      background-color: #fff;
    }
  
    &-item {
      display: flex;
      height: 66rpx;
      line-height: 66rpx;
      padding: 15rpx 10rpx;
      background-color: #fff;
      font-size: 28rpx;
      border-bottom: 1rpx solid #ddd;
      align-items: center;
      &:last-child {
        border: none;
      }
  
      .label {
        width: 80rpx;
        color: #333;
      }
  
      .account {
        color: #666;
      }
  
      .input {
        flex: 1;
        display: block;
        height: 46rpx;
      }
  
      .radio {
        margin-right: 20rpx;
      }
  
      .picker {
        flex: 1;
      }
      .placeholder {
        color: #808080;
      }
    }
  
    &-button {
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      margin: 30rpx 20rpx;
      color: #fff;
      border-radius: 80rpx;
      font-size: 30rpx;
      background-color: #27ba9b;
    }
  }
  </style>